const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const path = require('path');
// 相对路径转绝对路径
const resolvePath = _path => path.resolve(__dirname,_path)
const baseConfig = {
    entry:resolvePath('../src/index.jsx'),
    output:{
        path:resolvePath('../dist'),
        filename:'main.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                exclude: /node_modules/ ,
                use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                exclude: /node_modules/ ,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']
            },
            {
                test:/\.tsx$/,
                exclude: /node_modules/ ,
                use:'ts-loader'
            },
            { 
                test: /\.jsx?$/, 
                 use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env",
                                "@babel/preset-react",
                            ],
                        },
                    },
                ], 
                exclude: /node_modules/ 
            },
            {
                test:/\.svg$/,
                type:'asset/resource'
            }

        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:resolvePath('../public/index.html'),
            filename:'index.html',
            title:'react-app'
        }),
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns:['../dist']
        }),
        new MiniCssExtractPlugin({
            filename:'[name].[hash:8].css'
        })
    ]
}
module.exports = {
    resolvePath,
    baseConfig
}
